<template>
  <a-modal
    :visible="visible"
    :title="'分类详情'"
    :footer="false"
    @cancel="$emit('update:visible', false)"
    @visible-change="handleVisibleChange"
    :mask-closable="true"
    modal-class="category-detail-modal"
    :width="700"
  >
    <div class="category-detail-container" v-if="category">
      <!-- 顶部信息区域 -->
      <div class="category-detail-header">
        <div class="avatar-container">
          <a-avatar :size="80" :style="{ backgroundColor: category.visibility ? '#00b42a' : '#f53f3f' }">
            {{ category.name ? category.name.substring(0, 1) : 'C' }}
          </a-avatar>
          <div class="status-badge" :class="{ active: category.visibility }">
            {{ category.visibility ? '已启用' : '已禁用' }}
          </div>
        </div>
        <div class="basic-info">
          <h2>{{ category.name }}</h2>
          <div class="info-item">
            <icon-user />
            分类ID: {{ category.id }}
          </div>
          <div class="info-item">
            <icon-mobile />
            排序: {{ category.sort }}
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { CategoryRecord } from '@/api/category'
import { IconUser, IconMobile } from '@arco-design/web-vue/es/icon'

// 定义组件属性
const props = defineProps<{
  visible: boolean
  category: CategoryRecord | null
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

// 处理对话框可见性变化
const handleVisibleChange = (val: boolean) => {
  emit('update:visible', val)
}
</script>

<style scoped lang="less">
@import '../styles/common.less';

:deep(.category-detail-modal) {
  .arco-modal-header {
    border-bottom: 1px solid #f2f3f5;
    padding-bottom: 12px;
  }
}

.category-detail-container {
  .category-detail-header {
    display: flex;
    align-items: center;
    padding-bottom: 16px;

    .avatar-container {
      position: relative;
      margin-right: 20px;

      .status-badge {
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 12px;
        border-radius: 10px;
        font-size: 12px;
        background-color: #f53f3f;
        color: white;
        white-space: nowrap;
        min-width: 60px;
        text-align: center;

        &.active {
          background-color: #00b42a;
        }
      }
    }

    .basic-info {
      flex: 1;

      h2 {
        margin: 0 0 8px 0;
        font-size: 18px;
        color: #1d2129;
      }

      .info-item {
        margin-bottom: 6px;
        color: #4e5969;
        font-size: 14px;
        display: flex;
        align-items: center;

        .arco-icon {
          margin-right: 6px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
